import { Card as SemiCard, Button, ButtonGroup, List } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle, IconUpload, IconEdit, IconDelete, IconEyeOpened, IconHelpCircle } from "@douyinfe/semi-icons";
import { Popconfirm, Card, Space, Avatar, Row, Col, Image as AntdImage, Tag, Modal, message, Tooltip, Input, Table } from "antd";
import { v4 as uuidv4 } from "uuid";
import { useModel, Outlet, history } from "umi";
import { useReactive } from "ahooks";
import { useState, useEffect } from "react";
import React from "react";
import { format } from "timeago.js";

const DiscountPackageCarouselsPage = () => {
    const { imageBase64 } = useModel("global");
    return (
        <Card
            title="轮播图"
            size="small"
            bordered
            bodyStyle={{ padding: 0 }}
            extra={
                <ButtonGroup>
                    <Button icon={<IconPlusCircle />}>添加轮播图</Button>
                    <Button icon={<IconRefresh />}></Button>
                </ButtonGroup>
            }
        >
            <Table bordered={false} size="small" dataSource={[1]} rowKey="ciUuid" pagination={false} style={{ marginTop: 1 }}>
                <Table.Column title="顺序" align="center" width={60} render={(_, r, i) => i + 1} />
                <Table.Column
                    title="缩略图"
                    dataIndex="ciPict"
                    key="ciName"
                    align="left"
                    width={160}
                    render={(_, r) => <AntdImage preview height={120} src={imageBase64} fallback={imageBase64} />}
                />
                <Table.Column title="图片名称" dataIndex="ciQuat" key="ciQuat" align="center" />
                <Table.Column
                    title={
                        <Tooltip title={"点击更改显示顺序，根据数字从小到大显示"}>
                            {"显示顺序" + " "}
                            <IconHelpCircle size="small" />
                        </Tooltip>
                    }
                    dataIndex="ciMava"
                    key="ciMava"
                    align="center"
                    width={100}
                    render={(_, r) => (
                        <a onClick={() => openSequenceEditModal(r)}>
                            {_ ? (
                                <Avatar
                                    style={{
                                        backgroundColor: "orange",
                                    }}
                                >
                                    {_}
                                </Avatar>
                            ) : (
                                <Avatar
                                    style={{
                                        backgroundColor: "orange",
                                    }}
                                >
                                    0
                                </Avatar>
                            )}
                        </a>
                    )}
                />

                <Table.Column
                    title="操作"
                    width={90}
                    dataIndex="ciSepr"
                    key="ciSepr"
                    align="right"
                    render={(_, r) => (
                        <ButtonGroup>
                            <Button icon={<IconDelete />}></Button>
                        </ButtonGroup>
                    )}
                />
            </Table>
        </Card>
    );
};

export default DiscountPackageCarouselsPage;
